<template>
    <div class="login-container">
        <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="rules"
                class="login-loginForm"
                label-width="120px"
                status-icon>

            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input
                        v-model="loginForm.password"
                        autocomplete="off"
                        type="password"/>
            </el-form-item>

            <el-form-item label="验证码" prop="captcha">
                <el-input v-model.number="loginForm.captcha"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(loginFormRef)">Submit</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
/* 修改element-plus样式的思路 */
/* 核心思路:重新编写样式,覆盖默认的element-plus的样式 */
/* 三种方式 */
/* 1. 直接找到当前组件的dom结构中的类名或者id等等,直接编写样式进行覆盖 */
/* 2. 在模块化样式的时候,可以通过深度选择器来完成样式的编写 :deep() */
/* 3. 全局样式,一般会定义一个全局的专门用于覆盖el-plus样式的文件,将样式编写在全局文件中 */

/* 遇到问题: */
/* 
1.检查类名是否正确

2.检查权重

3.是否需要使用深度选择器 */

.login-loginForm .el-input {
    width: 350px;
}
</style>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
//创建引用
const loginFormRef = ref()

//表单规则校验的函数

const validateUsername = (rule, value, callback) => {
    // vaule就是对应输入框的输入值
    //callback 如果我们想让验证不通过,就往callback中传递参数,如果通过就不传递参数
    // console.log(value)

    //包含大小写字母 下划线 中划线 数字 3-16为
    let reg = /^[a-zA-Z0-9_-]{3,16}$/

    if (reg.test(value)) {
        callback()
    } else {
        callback('大小写字母,数字,下划线,中划线,3到16位')
    }

}
const validatePassword = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('输入的密码不能为空')
    }
}

const validateCaptcha = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('输入的验证码不能为空')
    }
}

//注入到表单中的数据
const loginForm = reactive({
    username: '',
    password: '',
    captcha: '',
})
//表单的验证规则对象
const rules = reactive({
    username: [{validator: validateUsername, trigger: 'blur'}],
    password: [{validator: validatePassword, trigger: 'blur'}],
    captcha: [{validator: validateCaptcha, trigger: 'blur'}],
})

//表单提交的时候触发的方法
const submitForm = (formEl) => {
    //formEl就是form组件的引用
    if (!formEl) return

    formEl.validate((valid) => {
        //用组件的时候 可以适当忽略逻辑的实现细节,只需要知道关键变量的使用就行了
        if (valid) {
            //表单校验通过

            //发起请求 验证验证码

            //验证码通过之后发起登入请求
            alert('验证通过')

        } else {

            //表单校验失败,啥也不干,return false就行了

            return false
        }
    })
}

</script>
  